<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="test"></div>

		<!-- 引入react核心库 -->
		<script src="js/react.development.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入react-dom 用于支持react操作dom -->
		<script src="js/react-dom.development.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入babel，用于将jsx转化成js。浏览器只识别js，不识别jsx -->
		<script src="js/17.0.1/babel.min.js" type="text/javascript" charset="utf-8"></script>

		<!-- 此处一定要写babel -->
		<script type="text/babel">
			// 1 创建类式组件
			class MyComponent extends React.Component{//myComponent继承了React.Component类
				/* React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点
				 该容器是专人专用的
				 */
				myRef = React.createRef()
				myRef2 = React.createRef()
				
				showData =() => {
					alert(this.myRef.current.value)
					console.log(this.myRef)
				}
				showData2 =() => {
					alert(this.myRef2.current.value)
				}
			
				render(){
					return (
						<div>
							<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;
							<button onClick={this.showData}>点我提示左边数据</button>&nbsp;
							<input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
						</div>
					)
				}
			}
			
			// 渲染虚拟DOM到页面
			ReactDOM.render(<MyComponent name='123'/>,document.getElementById('test'))
		</script>

	</body>
</html>
